<template>
  <div>
    <el-scrollbar height="600px" style="overflow-x: hidden">
      <div style=" padding:20px" >
        <el-card >
          <div>设备分布</div>
          <div style="display: flex">
            <div style="position: relative">
              <total-count :count="monitor"></total-count>
              <pie-chart  :list="statusCollectData"></pie-chart>
            </div>
            <div id="container" style="width:100%;height: 520px" ref="map"></div>
          </div>
        </el-card>
        <el-card >
          <div style="height: 300px">数据面板</div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import TotalCount from '../components/totalCount.vue'
import PieChart from '../components/charts/pieChart.vue'
import { deviceList, monitor, statusCollect } from '@/api/board'
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
interface Count {
  deviceCount: number
  alarmCount: number
}
interface DataItem {
  name: string;
  value: number;
}
@Options({
  watch: {
    mapData (val: any, oldVal: any) {
      if (val.length > 0) {
        this.$nextTick(() => {
          this.initMap()
        })
      }
    }
  },
  components: {
    TotalCount,
    PieChart
  }
})
export default class Index extends Vue {
  private monitor:Count={ deviceCount: 0, alarmCount: 0 }
  private statusCollectData=null
  private mapData: any[] = []
  private geoCoordMap:any = {
  }

  private data1: DataItem[] = []

  created () {
    this.getDeviceList()
    this.getMonitor()
    this.getStatusCollect()
  }

  mounted () {
    this.initMap()
  }

  async getMonitor () {
    await monitor().then((res: any) => {
      this.monitor = res
    })
  }

  async getStatusCollect () {
    await statusCollect({}).then((res: any) => {
      this.statusCollectData = res
    })
  }

  // 地图 - 根据经纬度获取设备信息
  async getDeviceList () {
    await deviceList({ lon: 116.400244, lat: 39.92556, distance: 10000 }).then((res: any) => {
      this.mapData = res
    })
    // var t = new String(this.mapData[0].deviceId)
    this.geoCoordMap = new Map()
    this.mapData.forEach((item: any, index:any) => {
      this.data1.push({ name: this.mapData[index].deviceId, value: 1 })
      var split = this.mapData[index].location.split(',')
      console.log(split)
      this.geoCoordMap.set(this.mapData[index].deviceId, [split[1], split[0]])
    })
    console.log('xxxxxxxxxxxx')
    console.log(this.geoCoordMap)
    console.log(this.data1)
  }

  public initMap () {
    console.log('init.....')
    const _self = this as any

    var chartDom:HTMLElement = this.$refs.map as HTMLElement
    var myChart = echarts.init(chartDom)
    var option
    const convertData = function (data:any) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = _self.geoCoordMap.get(data[i].name)
        console.log(geoCoord)
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        })
      }
      console.log('res')
      console.log(res)
      return res
    }
    option = {
      title: {
        text: '设备分布地图',
        subtext: '',
        sublink: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      bmap: {
        center: [100.15, 35.89],
        zoom: 5,
        roam: true
      },
      series: [
        {
          name: '设备信息',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: convertData(_self.data1),
          symbol: 'image://',
          symbolSize: 32,
          encode: {
            value: 2
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    }
    option && myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>

</style>
